
// 更新 元素
function div_renewal(id_name, value) {
    const element = document.getElementById(id_name);
    if (element) {
        element.innerHTML = value;
    } else {
        console.log(`Element with id '${id_name}' not found in the DOM.`);
    }
};

function join_mode(mode, data) {
    var mode_str = "";
    var mode_list = [];
    Object.keys(data).forEach(key => {
        let temp = mode
            .replace(/{id}/g, key) // 使用全局替换确保所有都被替换  
            .replace(/{name}/g, data[key]);
        mode_list.push(temp); // 将每个生成的HTML片段添加到数组中  
    });
    mode_str = mode_list.join('')
    return mode_str;
};

// 处理一级菜单
function general_menu(config) {
    let id = config['id'];
    var mode = config['mode'];
    console.log(mode, id)
    // 拼接mode值
    mode_string = join_mode(mode, config['data']) + config['version'];
    // 添加页面信息
    div_renewal(id, mode_string);
};

// 处理二级菜单
function submenu(config) {
    let id = config['id'];
    var mode = config['mode'];
    // 拼接mode值
    mode_string = join_mode(mode, config['data']);
    // 添加页面信息
    div_renewal(id, mode_string);
};

// 处理数据页面
function data_page(config) {
    box_string = search_box(config['box']);
    tab_string = tab_data(config['tab']);
};

// 搜索框
function search_box(config) {
    let id = config["id"];
    let mode = config["mode"];
    let butt = config["button"];
    var data = config["data"]
    var mode_list = []
    Object.keys(data).forEach(key => {
        temp = mode.replace(/{id}/g, key).replace(/{name}/g, data[key]["name"]).replace(/{warn}/g, data[key]["warn"]);
        mode_list.push(temp);
    });
    mode_list.push(butt);
    var mode_string = mode_list.join('');
    div_renewal(id, mode_string);
};


 // 数据表

function tab_data(config) {
    // 模板定义 - 表头
    let header_mode = "<th>{value}</th>";
    // 模板定义 - 数据表
    let tab_mode = "<td>{value}</td>";

    let header_list = [];
    // 加载表头
    for (let i = 0; i < config['header'].length; i++) {
        let hed = header_mode.replace('{value}', config['header'][i]);
        header_list.push(hed);
    }

    let tab_list = [];
    // 加载数据表
    for (let tr_list of config['data']) {
        let te_val = [];
        for (let j = 0; j < tr_list.length - 1; j++) {
            let hed = tab_mode.replace('{value}', tr_list[j]);
            te_val.push(hed);
        }
        // 添加上操作按钮，注意修正了函数调用中的参数
        let but = `<td onclick="scr_d('${tr_list[tr_list.length - 1]}')">查看</td>
                  <td onclick="upd_d('${tr_list[tr_list.length - 1]}')">修改</td>
                  <td onclick="del_d('${tr_list[tr_list.length - 1]}')">删除</td>`;
        te_val.push(but);
        let tab_string = te_val.join('');
        tab_list.push(`<tr>${tab_string}</tr>`);
    }

    // 计算数量差（这里假设您想在表头中添加一个“操作”列，其列数与实际操作按钮数相匹配）
    let cont_num = config['data'].length - config['header'].length;
    let sesc = `<th colspan="${(cont_num * -1) + 2}">操作</th>`;
    header_list.push(sesc);

    // 整合全部
    let tab_string = `<table><thead>${header_list.join('')}</thead><tbody>${tab_list.join('')}</tbody></table>`;
    console.log(tab_string);
    div_renewal(config['id'], tab_string);
    // document.getElementById(config['id']).innerHTML = tab_string;
};


